
<template>
  <div class="order-detail-view" v-if="order">
    <el-page-header @back="goBack" :content="`订单详情 - ${order.id}`"></el-page-header>

    <el-card class="order-info-card">
      <template #header>
        <div class="card-header">
          <span>基本信息</span>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单ID">{{ order.id }}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{ order.userId }}</el-descriptions-item>
        <el-descriptions-item label="总积分">{{ order.totalPoints }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="statusTagType(order.status)">{{ order.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ order.createdTime }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="order-items-card">
      <template #header>
        <div class="card-header">
          <span>商品列表</span>
        </div>
      </template>
      <el-table :data="order.items" style="width: 100%">
        <el-table-column prop="productId" label="商品ID"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="points" label="单价"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column label="小计">
          <template #default="{ row }">{{ row.points * row.quantity }}</template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="order-status-log-card">
      <template #header>
        <div class="card-header">
          <span>订单日志</span>
        </div>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="(log, index) in statusLogs"
          :key="index"
          :timestamp="log.timestamp"
        >
          {{ log.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>

  </div>
  <div v-else-if="loading" class="loading-spinner">
      <LoadingSpinner />
  </div>
  <div v-else>
    <el-empty description="订单不存在"></el-empty>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { Order, OrderItem } from '@/types'
import { getOrderDetail, getOrderStatusLog } from '@/api/modules/order'
import LoadingSpinner from '@/components/base/LoadingSpinner.vue'

const route = useRoute()
const router = useRouter()

const order = ref<Order | null>(null)
const statusLogs = ref<any[]>([])
const loading = ref(false)

const fetchOrderDetail = async () => {
  try {
    loading.value = true
    const orderId = Number(route.params.id)
    order.value = await getOrderDetail(orderId)
    const logs = await getOrderStatusLog(orderId)
    statusLogs.value = logs.map(log => {
      const parts = log.split(' - ');
      return { timestamp: parts[0], content: parts.slice(1).join(' - ') };
    });
  } catch (error) {
    ElMessage.error('获取订单详情失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const goBack = () => {
  router.back()
}

const statusTagType = (status: string) => {
  switch (status) {
    case 'PENDING': return 'warning'
    case 'PAID': return ''
    case 'SHIPPED': return 'primary'
    case 'COMPLETED': return 'success'
    case 'CANCELLED': return 'info'
    default: return 'info'
  }
}

onMounted(() => {
  fetchOrderDetail()
})
</script>

<style scoped>
.order-detail-view {
  padding: 20px;
}
.el-page-header {
  margin-bottom: 20px;
}
.order-info-card, .order-items-card, .order-status-log-card {
  margin-bottom: 20px;
}
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}
</style>
